<template>
    <div class="article-edit">
        <el-card class="mt-4 !border-none" header="基础信息" shadow="never">
            <el-form ref="formRef" :inline="false" class="ls-form" :model="formData" label-width="120px">
                <el-form-item label="产品id">{{ formData.origin_product_id }}</el-form-item>
                <el-form-item label="产品分类：">{{ formData.origin_product_cate_name.replace(/,/g, '') }}</el-form-item>
                <el-form-item label="贷款类型">{{formData.loan_type_name}}</el-form-item>
                <el-form-item label="银行：">{{formData.bank_name}}</el-form-item>
                <el-form-item label="产品logo：">
                    <image-contain v-if="formData.logo" :src="formData.logo" :width="60" :height="45" :preview-src-list="[formData.logo]" preview-teleported fit="contain" />
                </el-form-item>
                <el-form-item label="最高额度：">{{formData.quota/10000}}万</el-form-item>
                <el-form-item label="授信期限：">
                    <el-tag v-for="(item, index) in formData.credit_month" :key="index" type="info" class="mr-2.5"
                            size="small">{{ item == 1 ? '1个月' : item == 2 ? '2个月' : item == 3 ? '3个月' : item == 6 ? '6个月' :item == 9 ? '9个月' : item == 12 ? '1年' : item == 18 ? '1年6个月': item == 24 ? '2年' : item == 36 ? '3年' : item == 48 ? '4年' : item == 60 ? '5年' : item == 120 ? '10年' : item == 240 ? '20年' : item == 360 ? '30年' : '' }}</el-tag>
                </el-form-item>
                <el-form-item label="利率类型：">{{ formData.rate_type == 1 ? '年化利率' : '日化利率' }} </el-form-item>
                <el-form-item label="利率值：">
                    {{ formData.rate_type == 1 ? ((parseInt(String(formData.rate_start * 10000)) / 100).toString() + '%') :
                        ((parseInt(String(formData.rate_start * 100000)) / 100).toString() + '‰') }}
                    -
                    {{ formData.rate_type == 1 ? (parseInt(String(formData.rate_end * 10000)) / 100).toString() + '%' :
                        (parseInt(String(formData.rate_end * 100000)) /100).toString() + '‰' }}
                </el-form-item>
                <el-form-item label="还款方式：">{{ localGetRepaymentTypeText(formData.repayment_type) }}</el-form-item>
                <el-form-item label="状态：">
                    <span v-if="formData.is_enable == 0" style="color:red"> 已下架 </span>
                    <span v-if="formData.is_enable == 1"> 已上架 </span>
                </el-form-item>
                <el-form-item label="来自：">
                    <span v-if="formData.source == 1">小麒乖乖</span>
                    <span v-if="formData.source == 2">蓝鲸纪</span>
                </el-form-item>
                <el-form-item label="app显示状态：">
                    <span v-if="formData.is_enable == 0" style="color:red">隐藏</span>
                    <span v-if="formData.is_enable == 1">显示</span>
                </el-form-item>
                
            </el-form>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never" v-for="(domain, index) in formData.extra_info">
            <div class="font-medium mb-7">{{ domain.attr }}</div>
            <div v-html="domain.content"></div>
        </el-card> 
    </div>
</template>
<script lang="ts" setup name="onlineDetail">
    import { onlineProductDetail } from '@/api/product/online'
    import { isEmpty } from "@/utils/util";
    const localGetRepaymentTypeText = (repaymentTypes: number[] | null): string => {
        //1.先息后本 2.等额本息 3.等额本金 4.一次性还本付息 5.随借随还
        let repaymentTypeStr = ''
        if (!isEmpty(repaymentTypes)) {
            (repaymentTypes as number[]).forEach((item, index) => {
                if (item == 1) {
                    repaymentTypeStr += '先息后本/'
                } else if (item == 2) {
                    repaymentTypeStr += '等额本息/'
                } else if (item == 3) {
                    repaymentTypeStr += '等额本金/'
                } else if (item == 4) {
                    repaymentTypeStr += '一次性还本付息/'
                } else if (item == 5) {
                    repaymentTypeStr += '随借随还/'
                }

            })
        }
        return repaymentTypeStr.slice(0, -1)
    }
    const route = useRoute();
    const formData:any = reactive({
        origin_product_id: '',
        origin_product_cate_name: '',
        loan_type_name: '',
        bank_name: '',
        name: '',
        logo: '',
        quota: '',
        credit_month: [],
        rate_type: '',
        rate_start: '',
        rate_end: '',
        repayment_type: [],
        is_enable: '',
        source: '',

        extra_info: [],

        age_start: '',
        age_end: '',
        apply_person_requirement: [],
        company_requirement: []
    })
    const getDetails = async () => {
		const data = await onlineProductDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

    route.query.id && getDetails()
</script>
<style scoped lang="scss">

</style>